<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .my-select{
      display: flex;
    }
  </style>
</head>
<body>

<div id="app">
  使用组件的实例，就跟写标签差不多
  <my-select></my-select>
  <hr>
  <my-select></my-select>
  <hr>
</div>

<div id="app2">
  使用组件的实例，就跟写标签差不多
  <my-select></my-select>
  <hr>
  <my-select></my-select>
  <hr>
</div>

<template id="my-select-template">
  <div class="my-select">
    <div>一级分类：<select> <option value="">请选择</option> </select></div>
    <div>二级分类：<select> <option value="">请选择</option> </select></div>
    <div>三级分类：<select> <option value="">请选择</option> </select></div>
  </div>
</template>

<script src="js/vue.js"></script>
<script>

  var vm = new Vue( {
    el: "#app",
    data:{
      message: "hello!"
    },
    methods:{},
    computed:{},
    created:function () {},
    watch:{},
    filters:{},
    // 这里定义的组件是局部组件
    components:{
      "my-select": {
        // 组件中的数据部门必须是函数的方式返回
        data:function () {
          return {
            message: "我是组件中的data"
          }
        },
        // 组件的模板，除了直接写内容结构之外，也可以写一个选择器
        template:"#my-select-template"
      }
    }
  } );

  var vm = new Vue( {
    el: "#app2",
    data:{
      message: "hello!"
    },
    methods:{}
  } );
</script>

</body>
</html>
